<style>
    .sensor .header,.monitor .header{
        border: 1px solid #ccc;
        padding: 5px;
        height: 40px;
        line-height: 30px;
    }
    .sensor .body table thead th:first-child,.monitor .body table thead th:first-child{
        width: 30%;
    }
</style>
<form class="form-horizontal" role="form" id="userForm">
    <input type="hidden" name="id">
    <input type="hidden" name="sensorGroups">
    <input type="hidden" name="monitors">
    <div class="form-group">
        <label  class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="username"/>
        </div>

        <label  class="col-sm-2 control-label">手机号</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="phone"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">海康用户名</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="hIKUsername"/>
        </div>

        <label  class="col-sm-2 control-label">海康密码</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="hIKPassword"/>
        </div>
    </div>
    <div class="form-group" hide>
        <label  class="col-sm-2 control-label">用户类型</label>
        <div class="col-sm-4">
            <select  class="form-control userType" name="userType"></select>
        </div>

        <label  class="col-sm-2 control-label" hide>负责人</label>
        <div class="col-sm-4" hide>
            <select type="search" class="form-control select2" name="createUserId"></select>
        </div>
    </div>

    <div class="sensor">
        <div class="header">
            <button type="button" class="btn btn-primary btn-sm pull-right addSensor">添加传感器</button>
            相关传感器
        </div>
        <div class="body">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <th>删除</th>
                <th>传感器组名称</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div class="monitor">
        <div class="header">
            <button type="button" class="btn btn-primary btn-sm pull-right addMonitor">添加探头</button>
            相关监控机组
        </div>
        <div class="body">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <th>删除</th>
                <th>探头名称</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</form>
<script>
    $(function () {
        AsyncGet("${basePath}/manager/user/getUserRole",null,function (value) {
            if(value.data.role!="超级管理员"){
                $("#userForm [hide]").hide();
            }
        })
        loadSelectByClassAsync("${basePath}/manager/user/getUserRoleList",null,"userType","--请选择用户类型--","userType","role");
        $("#userForm [name='createUserId']").loadSelect2(
            "${basePath}/root/function/getBackgroundManagerList",
            "请输入姓名查询",2,"username","username");
        var interval=setInterval(function () {
            if($("#userForm .select2").length>0){
                $("#userForm .select2").width("100%");
                clearInterval(interval);
            }
        },100);
        $("#userForm .sensor .body table tbody").on("click", "tr td button",function () {
            var tr=$(this).parents("tr");
            var id = tr.attr("id");
            var sensorGroups = $('#userForm [name="sensorGroups"]').val();
            sensorGroups = sensorGroups.substring(0, sensorGroups.indexOf(id) - 1) + sensorGroups.substring(sensorGroups.indexOf(id) + 1);
            tr.remove();
        });
        $("#userForm .monitor .body table tbody").on("click", "tr td button",function () {
            var tr=$(this).parents("tr");
            var id = tr.attr("id");
            var monitors = $('#userForm [name="monitors"]').val();
            monitors = monitors.substring(0, monitors.indexOf(id) - 1) + monitors.substring(monitors.indexOf(id) + 1);
            tr.remove();
        });
        $("#userForm .addSensor").click(function(){
            modals.openWin({
                winId: "addSensor",
                title: '添加传感器',
                width: '900px',
                url: "${basePath}/function/manager/user/addSensor",
                showFunc:function () {
                    initTable("${basePath}/manager/sensor/getSensorGroupList",
                        $("#addSensor #searchDiv"),
                        $("#addSensor  table"),
                        $("#addSensor .pageSize"),
                        $("#addSensor .paging"));
                    $("#addSensor .modal-body .box-footer button:last").unbind("click").click(function () {
                        $("#addSensor  table").find("tbody tr td input:checkbox").each(function () {
                            var sensorGroups=$('#userForm [name="sensorGroups"]').val();
                            var id = $(this).parents("tr").find("td:first").text();
                            var name = $(this).parents("tr").find("td:eq(2)").text();
                            if ($(this).prop("checked")&&sensorGroups.indexOf(id) == -1) {
                                var tr = $("<tr></tr>");
                                var buttonTd = $("<td><button type='button' class='btn btn-primary btn-sm'>删除</button></td>");
                                var nameTd = $("<td>" + name + "</td>");
                                tr.attr("id",id).append(buttonTd).append(nameTd);
                                $("#userForm .sensor .body table tbody").append(tr);
                                sensorGroups+=","+id;
                                $('#userForm [name="sensorGroups"]').val(sensorGroups);
                            }
                        })
                        modals.closeWin("addSensor");
                    });
                }
            });
        })

        $("#userForm .addMonitor").click(function(){
            modals.openWin({
                winId: "addMonitor",
                title: '添加监控',
                width: '900px',
                url: "${basePath}/function/manager/user/addMonitor",
                showFunc:function () {
                    initTable("${basePath}/manager/monitor/getMonitorList",
                        $("#addMonitor #searchDiv"),
                        $("#addMonitor  table"),
                        $("#addMonitor .pageSize"),
                        $("#addMonitor .paging"));
                    $("#addMonitor .modal-body .box-footer button:last").unbind("click").click(function () {
                        $("#addMonitor  table").find("tbody tr td input:checkbox").each(function () {
                            var monitors=$('#userForm [name="monitors"]').val();
                            var id = $(this).parents("tr").find("td:first").text();
                            var name = $(this).parents("tr").find("td:eq(2)").text();
                            if ($(this).prop("checked")&&monitors.indexOf(id) == -1) {
                                var tr = $("<tr></tr>");
                                var buttonTd = $("<td><button type='button' class='btn btn-primary btn-sm'>删除</button></td>");
                                var nameTd = $("<td>" + name + "</td>");
                                tr.attr("id",id).append(buttonTd).append(nameTd);
                                $("#userForm .monitor .body table tbody").append(tr);
                                monitors+=","+id;
                                $('#userForm [name="monitors"]').val(monitors);
                            }
                        })
                        modals.closeWin("addMonitor");
                    });
                }
            });
        })
    })
</script>

